<script setup>

import { useRouter } from "vue-router";
import request from "@/common/utils/request";

import {
    reactive,
    onMounted,
    nextTick,
    ref,
    h
} from "vue";

import { columns } from './index.js'

import { PlusOutlined,SearchOutlined } from '@ant-design/icons-vue'

import dialog_douyin from "./modules/dialog_douyin.vue";
import dialog_wx from "./modules/dialog_wx.vue";
const router = useRouter();
onMounted(() => {
    getList()
})

const emit = defineEmits(['toCreatLink', 'editLink:data'])

const dialog_douyinRef = ref(null)
const dialog_wxRef = ref(null)
const state = reactive({
    selection: [
        '待审核',
        '通过',
        '驳回'
    ],
    platform_name: '', // 项目名称
    status: null, // 状态
    splitTime: [], // 操作时间
    list: [], // 列表项
    pageSize: 10,
    page: 1,
    start_time: '',
    end_time: '',
    total: 0,

    stepCurrent: 0,
})

const tableLoding = ref(false)

const typeList = ref([
    { id: 1, img: '', name: '抖音', },
    { id: 2, img: '', name: '微信', },
])

// 获取列表数据
const getList = async () => {
    try {
        tableLoding.value = true
        const params = {
            page: state.page,
            pageSize: state.pageSize,
            platform_name: state.platform_name, // 项目名称
            // status: state.status, // 状态
            start_time: state.start_time, // 开始时间
            end_time: state.end_time, // 结束时间
        }
        const res = await request.get('work_ai', '/user/shotstack/toReachCustomers/list', params)
        console.log(res, '抖转微列表');
        state.list = res.result.data
        state.total = res.result.total
        tableLoding.value = false
    } catch (error) {
        tableLoding.value = false
    }

}

// 删除
const del = async (id) => {
    try {
        const res = await request.del('work_ai', '/user/shotstack/toReachCustomers/delete', { id })
        nextTick(() => {
            getList()
        })
    } catch (error) {
        console.log(error, 'error');
    }
}

//  编辑
const edit = (id) => {
    emit('editLink', id)
}


const timer = ref(null)
// 搜索项目名称
const searchName = () => {
    if (timer.value) {
        clearTimeout(timer.value)
        timer.value = 0
    }
    timer.value = setTimeout(() => {
        timer.value = 0
        state.page = 1
        state.pageSize = 10
        getList()
    }, 300)
}

// 开启和关闭使用
const confirmChange = async (item) => {
    const params = {
        ...item,
        status: item.status == 1 ? 2 : 1
    }
    const res = await request.put('work_ai', '/user/shotstack/toReachCustomers/update', {
        ...params
    })
    console.log(res, '状态改变');
    nextTick(() => {
        getList()
    })
}

// 打开分享弹窗
const openDialog = (item) => {
    // debugger
    // dialog_wxRef.value && dialog_wxRef.value.openDialog(item)
    dialog_douyinRef.value && dialog_douyinRef.value.openDialog(item)
}

const addShortUrl = () => {
    // emit('toCreatLink')
    router.push({
        name: 'Creatingdrainagetool'
    })
}

const tabChange = (pagination, filters, sorter, { currentDataSource }) => {
    console.log(pagination, filters, sorter, { currentDataSource });
    state.page = pagination.current
    state.pageSize = pagination.pageSize
    getList()
}
</script>

<template>
    <div class="container">
        <!-- 顶部警告 -->
        <div style="margin-bottom: 15px; font-size: 16px; font-weight: bold; padding-top:5px;">

        </div>

        <!-- 主体容器 
        background-color: #fff; border-radius:10px 
        -->
        <div style="width:calc(100% - 30px); height:calc(100vh - 190px);  padding:0 15px 20px 15px; ">
            <!-- 创建按钮  -->
            <div style="margin-bottom: 20px;">
                <a-button @click="addShortUrl" :icon="h(PlusOutlined)" type="primary">
                    创建外链
                </a-button>
            </div>
            <!-- 头部搜索表单 -->
            <div style="display: flex; align-items: center; justify-content: space-between;">
                <div style="display: flex; align-items: center;">
                    <span>外链名称：</span>
                    <a-input allowClear @input="searchName" v-model:value="state.platform_name"
                        style="width: 210px; margin-left: 10px;" placeholder="请输入外链名称搜索">
                        <template #prefix>
                            <SearchOutlined />
                        </template>
                        </a-input>
                </div>


            </div>


            <!-- 表格部分 -->
            <!-- <div
                style="width: 100%;height:calc(100% - 55px);overflow-y: auto; margin-top: 20px; border-radius: 6px; background-color: #FFF;"> -->
            <!-- table容器 -->
            <div class="table_content">
                <a-table :columns="columns" :data-source="state.list" @change="tabChange" :loading="tableLoding"
                    :pagination="{
                        pageSize: state.pageSize,
                        current: state.page,
                        total: state.total,
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: ['5', '10', '20', '50', '100'],
                    }">
                    <template #bodyCell="{ column, record }">
                        <!-- 卡片名称 -->
                        <template v-if="column.key === 'platform_name'">
                            <!-- <span>{{ record?.platform_name }}</span> -->
                            <div class="name_box">
                                <span class="name">
                                    {{ record.platform_name || '---' }}
                                </span>
                                <span class="time">
                                    {{ record.created_at || '---' }}
                                </span>
                            </div>
                        </template>
                        <template v-if="column.key === 'all_num'">
                            <span>{{ (record?.customer_cnt || 0) + ' / ' + (record?.customer_now || 0) }}</span>
                        </template>
                        <!-- 外链地址 -->
                        <!-- <template v-if="column.key === 'link_to'">
                            <span>跳转到 视频号/视频号视频</span>
                        </template> -->
                        <!-- 二维码数量 -->
                        <!-- <template v-if="column.key === 'erweimaNum'">
                            <span>--</span>
                        </template> -->
                        <!-- 是否开启 -->
                        <template v-if="column.key === 'status'">
                            <a-popconfirm
                                :title="record.status == 1 ? `确认关闭（${record.platform_name}）吗` : `确认开启（${record.platform_name}）吗`"
                                @confirm="confirmChange(record)">
                                <a-switch :checked="record.status == 1"></a-switch>
                            </a-popconfirm>
                        </template>
                        <template v-if="column.key === 'edit'">
                            <div class="edit_btns">
                                <a-button @click="edit(record.id)" ghost type="primary">编辑</a-button>
                                <a-popconfirm title="确定删除此项吗?" ok-text="确定" cancel-text="取消" @confirm="del(record.id)">
                                    <a-button ghost danger type="primary">删除</a-button>
                                </a-popconfirm>
                            </div>
                        </template>

                    </template>
                </a-table>
                <!-- </div> -->
            </div>
        </div>

        <!-- </a-space> -->
    </div>

    <dialog_douyin ref="dialog_douyinRef"></dialog_douyin>
    <dialog_wx ref="dialog_wxRef"></dialog_wx>
</template>



<style lang="less" scoped>
// v
.container {

    .table_content {
        margin-top: 20px;

        .edit_btns {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0 10px;
        }

        .link_text_img {
            cursor: pointer;
            display: flex;
            // justify-content: center;
            align-items: center;

            img {
                width: 40px;
                height: 40px;
                object-fit: cover;
                cursor: pointer;
            }
        }

        .name_box {
            display: flex;
            flex-direction: column;
        }
    }

}

.blue-box {
    width: 3px;
    height: 24px;
    margin-right: 10px;
    border-radius: 6px;
    background-color: #3C9CFF;
}

// 右侧隐藏滚动条
::-webkit-scrollbar {
    display: none;
}

:deep(.ant-table-cell-row-hover) {
    background-color: #FFFFFF !important;
}

.content-msg {
    border: 1px solid #FFDDA6;
    background: #FFF2DB;
    padding: 10px;
    text-align: left;
}
</style>